<template>
	<view>
		<uni-nav-bar dark title="恢复赛程" fixed :statusBar="true" left-icon="left" @clickLeft="onLeft">

		</uni-nav-bar>


		<view v-for="(item, index) in list" :key="index" class="list">
			<view class="top flex justify-between">
				<view>删除时间：{{item.updateTime}}</view>
				<view>操作人：{{item.updateUserName}}</view>
			</view>
			<view class="center">
				<view>{{item.oneTeam ? item.oneTeam.teamName: ''}} vs {{item.twoTeam ? item.twoTeam.teamName : ''}}
				</view>
				<text>比赛时间：{{item.tournamentBeginTime}}</text>
			</view>
			<view class="buttom flex align-center justify-center" @click="onRecovery(item)">
				恢复赛事
			</view>
		</view>
		
		<uni-load-more :status="loadingType"></uni-load-more>
	</view>
</template>

<script>
	import {
		getList,
		putList
	} from '@/api/recovery/index.js'
	export default {
		data() {
			return {
				pageData: {
					pageNum: 1,
					pageSize: 15
				},
				list: [],
				total: 0,
				loadingType: 'loading'
			}
		},
		methods: {
			onLeft() {
				uni.navigateBack()
			},
			onRecovery(item) {
				uni.showModal({
					content: '确定要恢复吗？',
					success: (res) => {
						if (res.confirm) {
							putList({isDeleted:0,id:item.id}).then(res => {
									this.pageData = {
										pageNum: 1,
										pageSize: 15
									},
									this.list = [],
									this._getList()
							})
						}
					}
				})
				
			},
			_getList() {
				const contestId = uni.getStorageSync('contestId')
				getList({
					...this.pageData,
					isDeleted: 1,
					contestId
				}).then(res => {
					this.total = res.total
					this.list.push(...res.rows)
					if (this.list.length == this.total) {
						this.loadingType = 'no-more'
						return;
					}
				})
			}
		},
		async onReachBottom() {
			if (this.list.length == this.total) {
				this.loadingType = 'no-more'
				return;
			}
			this.loadingType = 'loading'
			this.pageData.pageNum += 1
			this._getList()
		},
		onLoad() {
			this._getList();
		}
	}
</script>

<style lang="scss" scoped>
	.list {
		margin: 20rpx 20rpx;
		padding: 30rpx;
		border-radius: 20rpx;

		.top {
			font-size: 24rpx;
			color: #a3a0a0;
		}

		.center {
			border-top: 1px solid #eee;
			border-bottom: 1px solid #eee;
			padding: 30rpx 0;
			margin: 30rpx 0;

			view {
				font-size: 30rpx;
				font-weight: 800;
				margin-bottom: 16rpx;
			}

			text {
				font-size: 26rpx;
				color: #a3a0a0;
			}
		}

		.buttom {
			color: $font-color;
			text-align: center;
			font-size: 30rpx;
		}

		box-shadow: 0 0px 8px #eee;
	}
</style>